<template>
  <view class="page-default">
    <c-nav-bar title="班级迎新统计" type="white" bg-color="rgba(255,255,255,0.6)" />
    <view class="mx-3 mt-6">
      <up-row gutter="10">
        <up-col span="6">
          <view class="flex items-center rounded-2 bg-#00E0AE px-2 py-2">
            <view class="flex items-center justify-left">
              <u-image shape="circle" src="/static/images/icon/health.png" height="60" width="60" mode="aspectFill" />
            </view>
            <view class="ml-2 text-white">
              <view class="text-lg font-bold">
                28 人
              </view>
              <view class="text-xs">
                特殊体质上报
              </view>
            </view>
          </view>
        </up-col>
        <up-col span="6">
          <view class="flex items-center rounded-2 bg-#F0CD42 px-2 py-2">
            <view class="flex items-center justify-left">
              <u-image shape="circle" src="/static/images/icon/sport.png" height="60" width="60" mode="aspectFill" />
            </view>
            <view class="ml-2 text-white">
              <view class="text-lg font-bold">
                28 人
              </view>
              <view class="text-xs">
                特殊体质上报
              </view>
            </view>
          </view>
        </up-col>
      </up-row>
    </view>

    <view class="m-3 mt-4 rounded-2 bg-white bg-opacity-90 px-4 pb-8 pt-2 line-height-6">
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />特殊疾病统计
      </view>
      <view>
        <ColumnChart />
        <view class="px-2 pb-4 pt-6">
          <u-line dashed />
        </view>
        <view class="m-3 flex items-center text-#1A2B5C font-bold">
          <view class="mr-2 h-4 w-6px rounded-2 bg-#02CAB1" />参加运动统计
        </view>
        <PieChart />
      </view>
    </view>

    <view class="mx-8 pb-2">
      <u-button size="default" shape="circle" class="white-button mb-8 mt-8" @click="goNextPage">
        <text class="text-base text-#3AA69B">
          查看详情
        </text>
      </u-button>
    </view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import ColumnChart from '../analysis/common/column.vue';
import PieChart from '../analysis/common/pie.vue';

const goNextPage = () => {
  uni.redirectTo({
    url: '/pages/biz/health/list',
  });
};
</script>

<style lang="scss" scoped>
.page-default {
  width: 100%;
  min-height: 100vh;
  background: url('@/static/images/welcome/header-bg.png') no-repeat center top ;
  background-size: 100% 50%;
}
.bg-green-rgba {
  background: rgba(231, 246, 234, 0.9);
  border: 1px solid #fff;
}
:deep(.u-line-progress__text){
  color: #2D7AFC !important;
  font-size: 16px !important;
  font-weight: bold !important;
}
.bg-blue-trsans{
  background: linear-gradient(to bottom, #e9f7fb,transparent, transparent);
}
.bg-green-trsans{
  background: linear-gradient(to bottom, #e6f9f7,transparent, transparent);
}
.bg-yellow-trsans{
  background: linear-gradient(to bottom, #fdf6e6,transparent, transparent);
}
.border-line {
  border: 1px #ffffff solid;

}
.border-line-dashed{
  border-bottom: 1px #e0e7ec dashed;
}
</style>
